<template>
  <button class="tooltip-main" ref="content">
    <div
      class="animate__animated tooltip"
      :class="[state.animate]"
      :style="{
        top: state.top,
        right: state.right,
        bottom: state.bottom,
        left: state.left
      }"
    >
      <slot name="tooltip"></slot>
    </div>
    <slot />
  </button>
</template>

<script setup lang="ts">
interface Props {
  placement: 'bottom' | 'top' | 'left' | 'right'
}

const props = withDefaults(defineProps<Props>(), {
  placement: 'bottom'
})

const state = ref({
  animate: '',
  top: '',
  right: '',
  bottom: '',
  left: ''
})

const content = ref()

onMounted(() => {
  const contentEl = content.value.lastElementChild
  switch (props.placement) {
    case 'bottom':
      state.value.animate = 'animate__fadeInDown'
      state.value.top = `${contentEl.offsetHeight + 20}px`
      break
    case 'top':
      state.value.animate = 'animate__fadeInUp'
      state.value.bottom = `${contentEl.offsetHeight + 20}px`
      break
    case 'right':
      state.value.animate = 'animate__fadeInLeft'
      state.value.left = `${contentEl.offsetWidth + 20}px`
      break
    case 'left':
      state.value.animate = 'animate__fadeInRight'
      state.value.right = `${contentEl.offsetWidth + 20}px`
      break
    default:
      break
  }
})
</script>

<style scoped lang="scss">
.tooltip-main {
  outline: none;
  border: none;
  background: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    .tooltip {
      display: flex;
    }
  }

  .tooltip {
    border-radius: 27px;
    position: absolute;
    background: #24252733;
    padding: 10px;
    transition: 0.4s;
    display: none;
    z-index: 99;
    animation-duration: 0.5s;
    white-space: nowrap;
  }
}
</style>
